import * as React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';

let appBarStyle = {
    textAlign: 'center'
};

interface open {
    open: boolean;
}

export class AppBarExampleIcon extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = { open: false };
    }
    openmenu() {
        this.setState({ open: true })
    }
    closemenu() {
        this.setState({ open: false })
    }
    render() {
        return (
            <div>
                <AppBar onLeftIconButtonTouchTap={this.openmenu.bind(this)} title={this.props.title} titleStyle={appBarStyle} />
                <Drawer docked={false} open={this.state.open} onRequestChange={this.closemenu.bind(this)}>
                    <MenuItem onTouchTap={this.closemenu.bind(this)}>Menu Item</MenuItem>
                    <MenuItem onTouchTap={this.closemenu.bind(this)}>Menu Item 2</MenuItem>
                </Drawer>
            </div>
        );
    }
}